<template>
  <div>
    <div class="swiper-container" v-if="categorys.length"> <!--// 解决获取图片的时候第一个为空-->
      <div class="swiper-wrapper" >
        <ul class="swiper-slide swiper_list" v-for="(categorys, index) of categorysArr" :key="index">
          <li class="swiper_list_son" v-for="(item, index) of categorys" :key="index">
            <img class="swiper_list_son_food_img" :src="baseImageUrl + item.image_url" alt="">
            <p>{{item.title}}</p>
          </li>
        </ul>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <img src="static/images/msite_back.svg" alt="back" v-else/>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import {mapState} from 'vuex'

export default {
  name: 'HomeSwiper',
  data () {
    return {
      mySwiper: null,
      baseImageUrl: 'https://fuss10.elemecdn.com'
    }
  },
  mounted () { // 这是在首次打开页面的时候执行
    this.$store.dispatch('getCategorys') // 在actions中取数据
  },
  computed: {
    ...mapState(['categorys']), // 在state中取数据
    // 根据categorys一位数组生成一个2维数组
    // 小数组中的元素个数最大是8(一张轮播图内部的个数最大是八)
    categorysArr () {
      const {categorys} = this // 取出后台数据对象
      const arr = [] // 准备一个空的二维数组
      let minArr = [] // 准备一个小数组（最大长度为8）,用let 因为要改变内容
      categorys.forEach(c => { // 遍历categorys
        if (minArr.length === 8) { // 如果minArr当前小数组已经满了（等于8），将创建一个新的数组
          minArr = [] // minArr是空的
        }
        if (minArr.length === 0) { // 如果minArr是空的，将小数组保存到大数组中
          arr.push(minArr)
        }
        minArr.push(c) // 将当前分类保存到小数组中
      })
      return arr
    }
  },
  watch: {
    categorys (value) { // categorys数组中有数据了, 在异步更新界面之前执行
      // 界面更新就立即创建Swiper对象
      this.$nextTick(() => { // 一旦完成界面更新, 立即调用(此条语句要写在数据更新之后)
        // 创建一个Swiper实例对象, 来实现轮播
        this.mySwiper = new Swiper('.swiper-container', {
          loop: true, // 可以循环轮播
          pagination: { // 分页器
            el: '.swiper-pagination'
          }
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .swiper-container >>> .swiper-pagination-bullet-active
    background: #25a4bb
    opacity 1!important
  .swiper-container >>> .swiper-pagination-bullet
    opacity .3
    width 12px
    height 12px
  .swiper-container >>> .swiper-container-horizontal > .swiper-pagination-bullets
    bottom: 0.16rem
  .swiper-container
    width 100%
    height 400px;
    overflow hidden
    padding-top 90px
    .swiper_list
      padding 10px 0
      background white
      display flex
      flex-direction row
      flex-wrap wrap
      align-content stretch
      .swiper_list_son
        float left
        width 25%
        text-align center
        margin-bottom 30px
        img
          width 100px
        p
          font-size 23px
          margin-top 20px
</style>
